.hover-panel {
    display: none;
    position: absolute;
    right: 0;
    padding-top: 15px;
    z-index: 1;

    &::before,
    &::after {
        display: block;
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        right: 65px;
        border: 7px solid transparent;
    }

    &::before {
        top: 4px;
        border-bottom-color: #fff;
        z-index: 2;
    }
    &::after {
        top: 2px;
        border-bottom-color: #ddd;
        z-index: 1;
    }
}

.header {
    height: 64px;
    background-color: #fff;
    .nav-bar {
        height: 64px;
        position: relative;

        .logo {
            float: left;
            margin-top: 7px;
            margin-right: 20px;

            a {
                display: block;
                color: #000;
            }
            img {
                height: 50px;
                float: left;
            }
            h1 {
                float: left;
                line-height: 50px;
                font-size: 22px;
                padding-left: 5px;
                font-weight: bold;
            }
        }

        .nav-list {
            float: left;
            margin-top: 16px;
            font-size: 20px;
            li {
                float: left;
                padding: 5px 14px;
                height: 30px;

                a {
                    display: inline-block;
                    &:hover,
                    &.selected {
                        color: @color1;
                    }
                    &.selected {
                        font-weight: bold;
                    }
                }
            }

            .qrcode {
                position: relative;
                .qrcode-img {
                    .hover-panel();
                }

                img {
                    position: relative;
                    width: 170px;
                    height: 170px;
                    border: 1px solid #ddd;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                }

                &:hover .qrcode-img {
                    display: block;
                }
            }
        }

        .search {
            float: left;
            margin-top: 16px;
            width: 260px;
            height: 35px;
            border: 1px solid @color1;
            border-radius: 60px;
            position: relative;
            margin-right: 50px;
            input {
                margin-left: 15px;
                width: 200px;
                height: 30px;
                font-size: 14px;
                &::placeholder {
                    color: #b8b8b8;
                }
            }
            .search-btn {
                position: absolute;
                top: -1px;
                right: -1px;
                background-color: @color1;
                width: 50px;
                height: 35px;
                border-radius: 60px;
                cursor: pointer;
            }
        }

        .login {
            float: right;
            margin-top: 25px;
            display: none;

            a {
                transition: color 0.3s;
                font-size: 14px;
            }
        }

        .user-info {
            float: right;

            & > * {
                float: left;
                margin-right: 20px;
            }

            & > a {
                margin-top: 25px;
            }

            .avator {
                position: relative;
                margin-top: 15px;
                padding-right: 15px;

                .set {
                    position: absolute;
                    right: 0;
                    .hover-panel();
                    &::before, &::after {
                        right: 25px;
                    }

                    ul {
                        position: relative;
                        background-color: #fff;
                        padding: 15px;
                        width: 150px;
                        color: #666;
                        border: 1px solid #ddd;

                        a {
                            display: block;
                            padding: 10px 0;
                            font-size: 14px;
                        }
                    }
                }

                &:hover .set {
                    display: block;
                }

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 0;
                    height: 0;
                    right: 0;
                    top: 15px;
                    border: 5px solid transparent;
                    border-top-color: #999;
                    transition: transform 0.3s;
                    transform-origin: 5px 3px;
                }

                &:hover::after {
                    transform: rotate(180deg);
                }

                img {
                    border-radius: 50%;
                    width: 35px;
                    height: 35px;
                }
            }
        }
    }
}
